<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="模板类型">
						<el-select v-model="state.param.type" placeholder="请选择模板类型" @change="modeChange()">
							<el-option v-for="item in state.query.storeType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="搜索：">
							<el-input placeholder="请输入关键字搜索" clearable></el-input>
						</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button  type="primary" class="ml15" @click="openAdd('add')">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" style="width: 100%">
						<el-table-column prop="id" label="模板ID" show-overflow-tooltip min-width="6%"></el-table-column>
						<el-table-column prop="name" label="模板内容" show-overflow-tooltip min-width="70%"></el-table-column>
						<el-table-column prop="id" label="模板类型" show-overflow-tooltip min-width="6%"></el-table-column>
						<el-table-column label="操作" show-overflow-tooltip min-width="12%">
							<template #default="scope">
								<span>213</span>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<templateDialog ref="templateDialogRef"></templateDialog>
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { reactive,onMounted,ref,defineAsyncComponent} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

const templateDialog = defineAsyncComponent(() => import('/@/views/notice/template/components/templateDialog.vue'));
// 添加模板

// 引入组件

// 定义变量内容
const templateDialogRef = ref();
const state = reactive({
	param: {
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1,
		nodeId: null, // 门店id
		dateTime: [],
		startTime: "",// 开始时间
		endTime: "",// 结束时间 
	},
	query: {
		storeType: [
			{ value: -1, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		]
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});

const modeChange = () => {

}

const shortcuts = [
	{
		text: '本月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.setDate(1))
			return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	const data = [] as any[];
	data.push({
		id: 10001,
		name: '康丽卡项',
		specs: [
			{
				name:'尺寸',
				children:[
					{
						value: 35,
						valueId: 1,
					},
					{
						value: 36,
						valueId: 2,
					},
				]
			},
			{
				name:'颜色',
				children:[
					{
						value:'黑',
						valueId:9,
					},
					{
						value:'白',
						valueId:4,
					},
				]
			}
		],
		sort: '1',
		status: true,
		createTime: new Date().toLocaleString()
	});
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
	addSpecsDialogRef.value.openDialog(type, row);
};
// 删除角色
const onRowDel = (row: RowRoleType) => {
	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		getTableData();
		ElMessage.success('删除成功');
	}).catch(() => {});
};

const openAdd = (id?: any) => {
	templateDialogRef.value.openDialog(id);
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>